<template>
  <div class="login">
    <div class="container">
      <a href="/#/index">
        <img src="/imgs/login-logo.png" alt="">
      </a>
    </div>

    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span>小米账号注册</span>
          </h3>
          <div class="input">
            <input type="text" placeholder="请输入用户名" v-model="username">
          </div>
          <div class="input">
            <input type="email" placeholder="请输入邮箱" v-model="email">
          </div>
          <div class="input">
            <input type="password" placeholder="请输入密码" v-model="password">
          </div>
          <div class="btn-box">
            <!--            <a class="btn" @click="handleRegister">注册</a>-->
            <el-button @click="handleRegister" type="primary" :loading="loading">注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-link">
        <a href="https://www.imooc.com/u/1343480" target="_blank">J 的主页</a>
      </div>
      <p class="copyright">Copyright ©2019 mi.futurefe.com All Rights Reserved.</p>
    </div>
  </div>
</template>
<script>
import {register} from "../api/home";

export default {
  name: 'register',
  data () {
    return {
      username: '',
      email: '',
      password: '',
      loading: false
    }
  },
  methods: {
    handleRegister () {
      this.loading = true
      register({
        username: this.username,
        password: this.username,
        email: this.email
      }).then(res => {
        this.loading = false
        if (res.data.status === 0) {
          this.$message.success('注册成功')
          setTimeout(() => {
            this.$router.push('/login')
          }, 1000)
        } else {
          this.$message.error('注册失败！用户名已存在')
        }
      })
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss">
.login {
  background: #f9f9f9;

  & > .container {
    height: 113px;

    img {
      width: auto;
      height: 100%;
    }
  }

  .container {
    width: 1226px;
    margin: 0 auto;
    text-align: center;
  }

  .wrapper {
    /*background: url('/imgs/login-bg.jpg') no-repeat center;*/

    .container {
      height: 576px;
      position: relative;

      .login-form {
        position: absolute;
        box-sizing: border-box;
        padding-left: 31px;
        padding-right: 31px;
        width: 410px;
        height: 510px;
        background-color: #ffffff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        right: 0;

        h3 {
          line-height: 23px;
          font-size: 24px;
          text-align: center;
          margin: 40px auto 49px;

          .checked {
            color: #ff6600;
          }

          .sep-line {
            margin: 0 32px;
          }
        }

        .input {
          display: inline-block;
          width: 348px;
          height: 50px;
          border: 1px solid #e5e5e5;
          margin-bottom: 20px;

          input {
            width: 100%;
            height: 100%;
            border: none;
            padding: 18px;
            box-sizing: border-box;
          }
        }

        .btn {
          width: 100%;
          line-height: 50px;
          margin-top: 10px;
          font-size: 16px;
        }

        .btn-box {
          text-align: center;
          background-color: #ff6600;
          cursor: pointer;

          button {
            width: 100%;
            border: none;
            outline: none;
            background-color: #ef6637;
            border-color: #ecf5ff;
          }
        }
      }
    }
  }
}

.footer {
  height: 100px;
  padding-top: 60px;
  color: #999999;
  font-size: 16px;
  text-align: center;

  .footer-link {
    a {
      color: #999999;
      display: inline-block;
    }

    span {
      margin: 0 10px;
    }
  }

  .copyright {
    margin-top: 13px;
  }
}
</style>
